<!--地图搜索模块-->
<template lang="">
    <div>
        <!-- 头部 -->
        <van-nav-bar  left-text=""  class="top"  @click-left="onClickLeft" left-arrow>
        <!-- 搜索区 -->
        </van-nav-bar>
        <van-search class="search" id="myse" fixed v-model="value" @blur.native.capture="checkval"  placeholder="请输入搜索关键词" />
        <van-dropdown-menu active-color="#1989fa" class="dropdown">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
        <!-- 地图区 -->      

		<div id="l-map"></div>
		<div id="r-result"></div>
		<!-- <div>{{mysear}}</div> -->

</div>
    </div>
</template>
<style scoped>
.top {
  position: absolute;
  border-radius: 10px;
}
.search {
  width: 80%;
  margin-top: -1px;
  margin-left: 50px;
}
.dropdown {
  margin-top: -10px;
}
.resultt {
  border: 1px solid red;
  width: 80%;
  height: 50px;
  margin: 0 auto;
}
body, html,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
	#l-map{height:300px;width:100%; position: fixed;}
	#r-result{width:100%;}
  #r-result>>>a[target="_blank"]{
    display: none;
  }
  #r-result>div{
    border: none;
  }
  #r-result>>>li{
    border: 1px dotted rgb(114, 114, 114);
    width: 95vw;
    display: block !important;
    /* text-align: center; */
    margin:5px auto !important;
    margin-top: 10px;
    border-radius: 10px;
  }
  #r-result>>>li>span{
    /* border: 1px solid red; */
    margin-top: 100px;
    /* position: absolute; */
  }
  #r-result>>>div>div:nth-child(1)>span{
    /* border: 1px solid red; */
    color: rgb(17, 17, 17) !important;
    font-size: 14px;
  }

</style>
<script>
export default {
  data() {
    return {
      val: "",
      inval: "",
      value: "",
      value1: 0,
      value2: "a",
	  mysear:'',
      option1: [
        { text: "区域", value: 0 },
        { text: "闵行", value: 1 },
        { text: "浦东新区", value: 2 },
      ],
      option2: [
        { text: "排序", value: "a" },
        { text: "按字母", value: "b" },
        { text: "按数字", value: "c" },
      ],
    };
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },
	checkval(){
		this.mysear = this.value;
		console.log(this.mysear)
	}
  },
  mounted() {
    // 百度地图API功能
    var map = new BMapGL.Map("l-map"); // 创建Map实例
	  //定位当前地方
	  var lat;
	  var lng;
    function myFun(result) {
      var cityName = result.name;
       lat = result.center.lat;
       lng = result.center.lng;
      // console.log(lat, lng);
		//     alert("当前定位城市:" + cityName);
		//   var ck= confirm('当前检测您的城市是'+cityName+'是否切换')
		//   if(ck){
		// 	    map.setCenter(cityName);
		//   }else{
		// 	  return
		//   }
	
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun);
	var a = myFun;
	// console.log()
  
 	map.centerAndZoom(new BMapGL.Point(121.48, 31.23), 17);
	//打印函数里面的值
	// console.log(myres)
    
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    let point = new BMapGL.Point(31.23, 121.48);
    var marker = new BMapGL.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
  

    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
    var LocationC = new BMapGL.LocationControl(); // 定位当前按钮
    map.addControl(LocationC);

    LocationC.addEventListener("click", function () {
      alert("您点击了标注");
    });  
	 // console.log(tex)
	 //封装一个地图查询
	  function goamp(val='人民医院'){
		var myKeys = val
		// console.log(val)
      var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map, panel: "r-result" },
        pageCapacity: 10,
      });
      local.searchInBounds(myKeys, map.getBounds());
	  }

	document.getElementById('myse').onblur = function(e){
		var res = document.getElementById('myse').value
		goamp(res)
	}
	  goamp();
  },
};
</script>